<template>
    <div>
        <el-divider content-position="left">标签页</el-divider>
        <el-tabs class="moduletabs"
                 v-model="sActiveTab">
            <el-tab-pane name="yhgl">
                <div slot="label"
                     class="moduletabs-i">
                    <div class="moduletabs-mark"
                         :title="999">999</div>用户管理
                </div>

                <div class="panel _body">用户管理</div>
            </el-tab-pane>
            <el-tab-pane name="pzgl"
                         closable
                         class="flex-col flex1">
                <div slot="label"
                     class="moduletabs-i">配置管理</div>

                <div class="panel _body">配置管理</div>
            </el-tab-pane>
        </el-tabs>

        <el-divider content-position="left">撑满容器的标签页</el-divider>
        <div style="height: 200px;">
            <el-tabs class="moduletabs _stretch"
                     v-model="sActiveStretchTab">
                <el-tab-pane name="yhgl">
                    <div slot="label"
                         class="moduletabs-i">用户管理</div>
                    <div class="panel _body">
                        用户管理<br>溢出测试<br>溢出测试<br>溢出测试<br>溢出测试<br>溢出测试<br>溢出测试<br>溢出测试<br>溢出测试
                    </div>
                </el-tab-pane>
                <el-tab-pane name="pzgl">
                    <div slot="label"
                         class="moduletabs-i">配置管理</div>

                    <div class="panel _body">配置管理</div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    export default {
        //**** el, name
        //**** components, directives
        //**** extends, mixins, provide/inject
        //**** props, data, computed
        data() {
            return {
                //-- 标签页 --
                sActiveTab: 'yhgl',
                sActiveStretchTab: 'yhgl',
            }
        },
        //**** watch
        //**** 生命周期钩子：mounted, updated, beforeDestroy 等
        mounted() {
        },
        beforeDestroy() {
        },
        //**** methods
        methods: {
            //*** 开放给父子组件的接口方法
            //*** 事件响应函数
            //*** 其他
        }
        //**** template, render
    }
</script>

<style lang="less" rel="stylesheet" scoped>
</style>
